import React, { Component, createRef } from 'react'

import PropTypes from 'prop-types'; // 数据类型检查（之类数组件使用）

export default class UserInput extends Component {
    static propTypes = { // 类组件在内部重写PropTypes方法
        bntTxt: PropTypes.string
    }
    static defaultProps = { // 默认参数设定，代替{this.props.bntTxt || '没有传我就默认'}
        bntTxt: '参数未传，我是按钮默认值'
    }

    constructor(){
        super()
        this.state = {
            userName: '请输入'
        }

        this.bindThisPramCopy = this.bindThisPram.bind(this)

        this.refDom = createRef() // 获取原生html的dom （事件）对象
    }

    // 同过修改事件触发输入修改绑定的state内容
    onChangeUserName = (e) => {
        // 打印e对象，react虚拟dom的时间元素对象
        console.log(e)
        this.setState({
            // e.currentTarget.value为事件当前目标的值
            userName: e.currentTarget.value
        })
    }

    // 使用非匿名函数的，是没有this对象，需要该元素调用的时候进行绑定，绑定以后还能传递参数
    bindThisPram(id){
        console.log(this.state)
        console.log(id)
    }

    // 调用父组件在props传递的函数对象参数进行调用父组件的函数，向父组件传递参数
    parentFunctionExec = () =>{
        if(this.state.userName === ''){
            return;
        }
        // 解决后去focus
        console.log(this.refDom) // 可以获取到当期事件dom对象
        console.log("我在User/Input/index.js中，我是被添加按钮触发的函数，我准备调用父组件的函数传递值为",this.state.userName)
        this.props.addUserFn(this.state.userName)
        // 添加完清楚输入框的值
        this.setState({
            userName: ''
        }, () =>{
            // 状态改变完进行focus操作
            this.refDom.current.focus()
        })
    }
    // 回车提交
    keyEnterParentFunctionExec = (e) =>{
        console.log("我在User/Input/index.js中，我是被输入框回车按钮触发的函数，我准备调用父组件的函数传递值为",this.state.userName)
        if(e.keyCode === 13){
            //this.props.addUserFn(this.state.userName)
            this.parentFunctionExec()
        }
        
    }

    render() {
        return (
            <div>
                {/* 默认value引入state的值，该框就不能做改变内容了，因为state的改变需要setState函数才能改变 */}
                输入用户姓名<input value={this.state.userName} 
                onChange={this.onChangeUserName} 
                onKeyUp={this.keyEnterParentFunctionExec}
                // 获取事件元素对象，可以进行光标定位
                ref={this.refDom}
                 />
                <button 
                // 匿名函数增加事件处理（不推介使用，每次渲染都会生成匿名函数），推介使用上面提取到一个单独的函数
                //onClick={() =>{console.log(this.state)}}
                //onClick={this.bindThisPram.bind(this, 23432)} //除非需要在事件上传该事件元素的别的元素值才使用
                //onClick={this.bindThisPramCopy} //这种不能传参
                //onClick={() => {
                    //this.bindThisPramCopy(1234343) // 不通过箭头函数，传参会在第一次渲染就执行了
                //}} 
                onClick={this.parentFunctionExec} //如果需要传值，最后办法做成子组件
                >{this.props.bntTxt}</button>
            </div>
        )
    }
}
